<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/xiehuan.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/xiehuan.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="HTTP请求,协议," />










<meta name="description" content="第一步 域名解析 1.浏览器查看自身dns缓存，看是否有对应域名的条目，如果有，并且没有过期，则解析到此结束； 2.浏览器自身缓存中没有找到，则会查看操作系统的的dns缓存，如果有有，并且没有过期，则解析到此结束；">
<meta name="keywords" content="HTTP请求,协议">
<meta property="og:type" content="article">
<meta property="og:title" content="一次完整的http请求">
<meta property="og:url" content="http://yoursite.com/2018/10/16/一次http请求/index.html">
<meta property="og:site_name" content="xiehuan">
<meta property="og:description" content="第一步 域名解析 1.浏览器查看自身dns缓存，看是否有对应域名的条目，如果有，并且没有过期，则解析到此结束； 2.浏览器自身缓存中没有找到，则会查看操作系统的的dns缓存，如果有有，并且没有过期，则解析到此结束；">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-11-20T02:35:11.447Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="一次完整的http请求">
<meta name="twitter:description" content="第一步 域名解析 1.浏览器查看自身dns缓存，看是否有对应域名的条目，如果有，并且没有过期，则解析到此结束； 2.浏览器自身缓存中没有找到，则会查看操作系统的的dns缓存，如果有有，并且没有过期，则解析到此结束；">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/10/16/一次http请求/"/>





  <title>一次完整的http请求 | xiehuan</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">xiehuan</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/10/16/一次http请求/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="xiehuan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="xiehuan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">一次完整的http请求</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-10-16T10:39:34+08:00">
                2018-10-16
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/TCP-IP/" itemprop="url" rel="index">
                    <span itemprop="name">TCP/IP</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="第一步-域名解析"><a href="#第一步-域名解析" class="headerlink" title="第一步 域名解析"></a>第一步 域名解析</h1><p> 1.浏览器查看自身dns缓存，看是否有对应域名的条目，如果有，并且没有过期，则解析到此结束；<br> 2.浏览器自身缓存中没有找到，则会查看操作系统的的dns缓存，如果有有，并且没有过期，则解析到此结束；<br> <a id="more"></a><br> 3.如果在操作系统的dns缓存中没有找到，则会读取hosts文件，查看是否有域名对应的ip，如果有，则解析到此结束；<br> 4.如果hosts文件中没有找到，浏览器会发起dns系统调用，向运营商提供的dns服务器发起域名解析请求（通过UDP协议向DNS服务器 的53端口发起请求，这个请求是递归请求，运营商的DNS服务器必须给我们提供该域名对应的IP地址）<br> 5.运营商DNS服务器收到请求之后，查找自身缓存，如果有，并且没有过期，则解析到此结束；<br> 6.运营商DNS服务器自身缓存中没有找到，则运营商DNS服务器向根域服务器发送请求，<br> 7.根域服务器解析域名，返回该域名所属顶级域名的IP地址；运营商DNS服务器又向返回的顶级域名IP地址发送请求，顶级域名服务器返回该域名的DNS地址；运营商DNS服务器再次请求域名的DNS地址（这个一般就是由域名注册商提供的，像万网，新网等），返回域名对应的IP地址<br> 8.运营商DNS服务器拿到真实的IP地址后，返回给系统内核，内核又返回给浏览器</p>
<h1 id="第二步-发起TCP的3次握手"><a href="#第二步-发起TCP的3次握手" class="headerlink" title="第二步 发起TCP的3次握手"></a>第二步 发起TCP的3次握手</h1><p>拿到域名对应的IP地址之后，User-Agent（一般是指浏览器）会以一个随机端口（1024 &lt; 端口 &lt; 65535）向服务器的WEB程序（常用的有httpd,nginx等）80端口发起TCP的连接请求。这个连接请求（原始的http请求经过TCP/IP4层模型的层层封包）到达服务器端后（这中间通过各种路由设备，局域网内除外），进入到网卡，然后是进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序（本文就以Nginx为例），最终建立了TCP/IP的连接</p>
<p>1） Client首先发送一个连接试探，ACK=0 表示确认号无效，SYN = 1 表示这是一个连接请求或连接接受报文，同时表示这个数据报不能携带数据，seq = x 表示Client自己的初始序号（seq = 0 就代表这是第0号包），这时候Client进入syn_sent状态，表示客户端等待服务器的回复<br>2） Server监听到连接请求报文后，如同意建立连接，则向Client发送确认。TCP报文首部中的SYN 和 ACK都置1 ，ack = x + 1表示期望收到对方下一个报文段的第一个数据字节序号是x+1，同时表明x为止的所有数据都已正确收到（ack=1其实是ack=0+1,也就是期望客户端的第1个包），seq = y 表示Server 自己的初始序号（seq=0就代表这是服务器这边发出的第0号包）。这时服务器进入syn_rcvd，表示服务器已经收到Client的连接请求，等待client的确认。<br>3） Client收到确认后还需再次发送确认，同时携带要发送给Server的数据。ACK 置1 表示确认号ack= y + 1 有效（代表期望收到服务器的第1个包），Client自己的序号seq= x + 1（表示这就是我的第1个包，相对于第0个包来说的），一旦收到Client的确认之后，这个TCP连接就进入Established状态，就可以发起http请求了。</p>
<h1 id="第三步-发起HTTP请求"><a href="#第三步-发起HTTP请求" class="headerlink" title="第三步 发起HTTP请求"></a>第三步 发起HTTP请求</h1><h2 id="HTTP-请求报文由请求行、请求头部、空行-和-请求包体-4-个部分组成"><a href="#HTTP-请求报文由请求行、请求头部、空行-和-请求包体-4-个部分组成" class="headerlink" title="HTTP 请求报文由请求行、请求头部、空行 和 请求包体 4 个部分组成"></a>HTTP 请求报文由请求行、请求头部、空行 和 请求包体 4 个部分组成</h2><p>请求行：请求行由方法字段、URL 字段 和HTTP 协议版本字段 3 个部分组成，他们之间使用空格隔开。常用的 HTTP 请求方法有 GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT;</p>
<p>　　● GET：当客户端要从服务器中读取某个资源时，使用GET 方法。GET 方法要求服务器将URL 定位的资源放在响应报文的部分，回送给客户端，即向服务器请求某个资源。使用GET 方法时，请求参数和对应的值附加在 URL 后面，利用一个问号(“?”)代表URL 的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&amp;op=bind。</p>
<p>　　● POST：当客户端给服务器提供信息较多时可以使用POST 方法，POST 方法向服务器提交数据，比如完成表单数据的提交，将数据提交给服务器处理。GET 一般用于获取/查询资源信息，POST 会附带用户数据，一般用于更新资源信息。POST 方法将请求参数封装在HTTP 请求数据中，以名称/值的形式出现，可以传输大量数据;</p>
<h2 id="Headers"><a href="#Headers" class="headerlink" title="Headers"></a>Headers</h2><p>请求头部：请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息，典型的请求头有：<br>Accept                    就是告诉服务器端，我接受那些MIME类型<br>Accept-Encoding   这个看起来是接受那些压缩方式的文件<br>Accept-Lanague    告诉服务器能够发送哪些语言<br>Connection           告诉服务器支持keep-alive特性<br>Cookie                  每次请求时都会携带上Cookie以方便服务器端识别是否是同一个客户端<br>Host                     用来标识请求服务器上的那个虚拟主机，比如Nginx里面可以定义很多个虚拟主机<br>                            那这里就是用来标识要访问那个虚拟主机。<br>User-Agent         用户代理，一般情况是浏览器，也有其他类型，如：wget curl 搜索引擎的蜘蛛等     </p>
<p>条件请求首部：<br>If-Modified-Since    是浏览器向服务器端询问某个资源文件如果自从什么时间修改过，那么重新发给我，这样                      就保证服务器端资源文件更新时，浏览器再次去请求，而不是使用缓存中的文件<br>安全请求首部：<br>Authorization:  客户端提供给服务器的认证信息；</p>
<p>空行：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头;</p>
<p>请求包体：请求包体不在 GET 方法中使用，而是在POST 方法中使用。POST 方法适用于需要客户填写表单的       场合。与请求包体相关的最常使用的是包体类型 Content-Type 和包体长度 Content-Length;</p>
<p>MIME（Multipurpose Internet Mail Extesions 多用途互联网邮件扩展）是一个互联网标准，它扩展了电子邮件标准，使其能够支持非ASCII字符、二进制格式附件等多种格式的邮件消息，这个标准被定义在RFC 2045、RFC 2046、RFC 2047、RFC 2048、RFC 2049等RFC中。 由RFC 822转变而来的RFC 2822，规定电子邮件标准并不允许在邮件消息中使用7位ASCII字符集以外的字符。正因如此，一些非英语字符消息和二进制文件，图像，声音等非文字消息都不能在电子邮件中传输。MIME规定了用于表示各种各样的数据类型的符号化方法。 此外，在万维网中使用的HTTP协议中也使用了MIME的框架，标准被扩展为互联网媒体类型。</p>
<p>MIME 遵循以下格式：major/minor 主类型/次类型 例如：</p>
<p>image/jpg<br>image/gif<br>text/html<br>video/quicktime<br>appliation/x-httpd-php</p>
<h1 id="第四步-服务器响应http请求"><a href="#第四步-服务器响应http请求" class="headerlink" title="第四步  服务器响应http请求"></a>第四步  服务器响应http请求</h1><h2 id="HTTP-响应报文由状态行、响应头部、空行-和-响应包体-4-个部分组成"><a href="#HTTP-响应报文由状态行、响应头部、空行-和-响应包体-4-个部分组成" class="headerlink" title="HTTP 响应报文由状态行、响应头部、空行 和 响应包体 4 个部分组成"></a>HTTP 响应报文由状态行、响应头部、空行 和 响应包体 4 个部分组成</h2><p>状态行：状态行由 HTTP 协议版本字段、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开;</p>
<p>状态码由三位数字组成，第一位数字表示响应的类型，常用的状态码有五大类如下所示：</p>
<p>　1xx：表示服务器已接收了客户端请求，客户端可继续发送请求;</p>
<p>　2xx：表示服务器已成功接收到请求并进行处理;</p>
<p>　3xx：表示服务器要求客户端重定向;</p>
<p>　4xx：表示客户端的请求有非法内容;</p>
<p>　5xx：表示服务器未能正常处理客户端的请求而出现意外错误;</p>
<p>状态码描述文本有如下取值：</p>
<p>　200 OK：表示客户端请求成功;</p>
<p>　400 Bad Request：表示客户端请求有语法错误，不能被服务器所理解;</p>
<p>　401 Unauthonzed：表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用;</p>
<p>　403 Forbidden：表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因;</p>
<p>　404 Not Found：请求的资源不存在，例如，输入了错误的URL;</p>
<p>　500 Internal Server Error：表示服务器发生不可预期的错误，导致无法完成客户端的请求;</p>
<p>　503 Service Unavailable：表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常;</p>
<p>响应头部：响应头可能包括：</p>
<p>　　Location：Location响应报头域用于重定向接受者到一个新的位置。例如：客户端所请求的页面已不存在原先的位置，为了让客户端重定向到这个页面新的位置，服务器端可以发回Location响应报头后使用重定向语句，让客户端去访问新的域名所对应的服务器上的资源;</p>
<p>　　Server：Server 响应报头域包含了服务器用来处理请求的软件信息及其版本。它和 User-Agent 请求报头域是相对应的，前者发送服务器端软件的信息，后者发送客户端软件(浏览器)和操作系统的信息。</p>
<p>　　Vary：指示不可缓存的请求头列表;</p>
<p>　　Connection：连接方式;</p>
<p>　　对于请求来说：close(告诉 WEB 服务器或者代理服务器，在完成本次请求的响应后，断开连接，不等待本次连接的后续请求了)。keepalive(告诉WEB服务器或者代理服务器，在完成本次请求的响应后，保持连接，等待本次连接的后续请求);</p>
<p>　　对于响应来说：close(连接已经关闭); keepalive(连接保持着，在等待本次连接的后续请求); Keep-Alive：如果浏览器请求保持连接，则该头部表明希望WEB 服务器保持连接多长时间(秒);例如：Keep-Alive：300;</p>
<p>　　WWW-Authenticate：WWW-Authenticate响应报头域必须被包含在401 (未授权的)响应消息中，这个报头域和前面讲到的Authorization 请求报头域是相关的，当客户端收到 401 响应消息，就要决定是否请求服务器对其进行验证。如果要求服务器对其进行验证，就可以发送一个包含了Authorization 报头域的请求;</p>
<p>　　空行：最后一个响应头部之后是一个空行，发送回车符和换行符，通知服务器以下不再有响应头部。</p>
<p>　　响应包体：服务器返回给客户端的文本信息;</p>
<p>　HTTP 工作原理</p>
<p>　　HTTP 协议采用请求/响应模型。客户端向服务器发送一个请求报文，服务器以一个状态作为响应。</p>
<h1 id="第五步-浏览器解析html代码，请求-html代码中的资源"><a href="#第五步-浏览器解析html代码，请求-html代码中的资源" class="headerlink" title="第五步  浏览器解析html代码，请求 html代码中的资源"></a>第五步  浏览器解析html代码，请求 html代码中的资源</h1><p>浏览器拿到index.html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载（会使用多线程下载，每个浏览器的线程数不一样），这个时候就用上keep-alive特性了，建立一次HTTP连接，可以请求多个资源，下载资源的顺序就是按照代码里的顺序，但是由于每个资源大小不一样，而浏览器又多线程请求请求资源，所以从下图看出，这里显示的顺序并不一定是代码里面的顺序。</p>
<p>浏览器在请求静态资源时（在未过期的情况下），向服务器端发起一个http请求（询问自从上一次修改时间到现在有没有对资源进行修改），如果服务器端返回304状态码（告诉浏览器服务器端没有修改），那么浏览器会直接读取本地的该资源的缓存文件。</p>
<h1 id="第六步-浏览器对页面进行渲染呈现给用户"><a href="#第六步-浏览器对页面进行渲染呈现给用户" class="headerlink" title="第六步 浏览器对页面进行渲染呈现给用户"></a>第六步 浏览器对页面进行渲染呈现给用户</h1><p>最后，浏览器利用自己内部的工作机制，把请求到的静态资源和html代码进行渲染，渲染之后呈现给用户。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/HTTP请求/" rel="tag"># HTTP请求</a>
          
            <a href="/tags/协议/" rel="tag"># 协议</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/09/23/categories/" rel="next" title="categories">
                <i class="fa fa-chevron-left"></i> categories
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/10/16/handshake/" rel="prev" title="handshake">
                handshake <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">xiehuan</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">28</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                
                  <span class="site-state-item-count">7</span>
                  <span class="site-state-item-name">分类</span>
                
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                
                  <span class="site-state-item-count">27</span>
                  <span class="site-state-item-name">标签</span>
                
              </div>
            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#第一步-域名解析"><span class="nav-number">1.</span> <span class="nav-text">第一步 域名解析</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第二步-发起TCP的3次握手"><span class="nav-number">2.</span> <span class="nav-text">第二步 发起TCP的3次握手</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第三步-发起HTTP请求"><span class="nav-number">3.</span> <span class="nav-text">第三步 发起HTTP请求</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP-请求报文由请求行、请求头部、空行-和-请求包体-4-个部分组成"><span class="nav-number">3.1.</span> <span class="nav-text">HTTP 请求报文由请求行、请求头部、空行 和 请求包体 4 个部分组成</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Headers"><span class="nav-number">3.2.</span> <span class="nav-text">Headers</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第四步-服务器响应http请求"><span class="nav-number">4.</span> <span class="nav-text">第四步  服务器响应http请求</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP-响应报文由状态行、响应头部、空行-和-响应包体-4-个部分组成"><span class="nav-number">4.1.</span> <span class="nav-text">HTTP 响应报文由状态行、响应头部、空行 和 响应包体 4 个部分组成</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第五步-浏览器解析html代码，请求-html代码中的资源"><span class="nav-number">5.</span> <span class="nav-text">第五步  浏览器解析html代码，请求 html代码中的资源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第六步-浏览器对页面进行渲染呈现给用户"><span class="nav-number">6.</span> <span class="nav-text">第六步 浏览器对页面进行渲染呈现给用户</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">xiehuan</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>




        







       <p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
